import React, { useState, useCallback } from 'react';
// import styles from './index.module.css';
import { Timeline, Avatar } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import styles from './index.module.css';

const Dynamic: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const handleLoadMore = useCallback(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 2000)
  }, [])
  return (
    <div>
    <Timeline>
      <Timeline.Item
        dot={<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} size={40}>今天</Avatar>}
      >
        2022-02-28
      </Timeline.Item>
      <Timeline.Item
        dot={<Avatar style={{ color: 'white', backgroundColor: 'green' }} size={40}>曹</Avatar>}
      >
        <div>曹向阳</div>
        <p>评论了 开源中国/Gitee 的 Pull Request !15614 【前后端分离】个人工作台API 15个小时前</p>
        <p>评论了 开源中国/gitee-ent-web 的 Pull Request !3086 Release 1.9.3 15个小时前</p>
      </Timeline.Item>
      <Timeline.Item
        dot={<Avatar style={{ color: 'white', backgroundColor: 'green' }} size={40}>艾</Avatar>}
      >
        <div>艾宇航</div>
        <p>评论了 开源中国/Gitee 的 Pull Request !15614 【前后端分离】个人工作台API 15个小时前</p>
      </Timeline.Item>
      <Timeline.Item
        dot={<Avatar style={{ color: 'white', backgroundColor: 'green' }} size={40}>彭</Avatar>}
      >
        <div>彭博</div>
        <p>推送到了 开源中国/gitee-ent-web 的 community/develop 分支 15个小时前</p>
      </Timeline.Item>
      <Timeline.Item>
        2022-02-27
      </Timeline.Item>
      <Timeline.Item
        dot={<Avatar style={{ color: 'white', backgroundColor: 'green' }} size={40}>曹</Avatar>}
      >
        <div>曹向阳</div>
        <p>评论了 开源中国/Gitee 的 Pull Request !15614 【前后端分离】个人工作台API 15个小时前</p>
        <p>评论了 开源中国/gitee-ent-web 的 Pull Request !3086 Release 1.9.3 15个小时前</p>
      </Timeline.Item>
      <Timeline.Item
        dot={<Avatar style={{ color: 'white', backgroundColor: 'green' }} size={40}>艾</Avatar>}
      >
        <div>艾宇航</div>
        <p>评论了 开源中国/Gitee 的 Pull Request !15614 【前后端分离】个人工作台API 15个小时前</p>
      </Timeline.Item>
      <Timeline.Item
        dot={<Avatar style={{ color: 'white', backgroundColor: 'green' }} size={40}>彭</Avatar>}
      >
        <div>彭博</div>
        <p>推送到了 开源中国/gitee-ent-web 的 community/develop 分支 15个小时前</p>
      </Timeline.Item>
    </Timeline>
    <div className={styles.load_more}>
        {
          loading ? (
            <LoadingOutlined />
          ) : (
            <div className={styles.load_btn} onClick={handleLoadMore}>
              查看更多
            </div>
          )
        }
      </div>
      <style global jsx>
        {
          `
            .ant-timeline-item-content {
              margin: 0 0 5px 36px;
            }
          `
        }
      </style>
    </div>
  )
}

export default Dynamic;